<template>
    <div>
        <van-nav-bar title="我的" left-text="主页" left-arrow @click-left="$router.push('/home/home')" fixed />
        <van-cell v-for="item in list" :key="item" :title="item" />

        <div class="main">
            <!-- 头部显示 -->
            <div class="card">
                <head-img :src="`${URL}${userStore.userInfo.avatar}`" size="80px"></head-img>
                <h1>{{ userStore.userInfo.username }}</h1>
            </div>
            <!-- 横向排列的积分和充值功能 -->
            <div class="list">
                <ul>
                    <li>
                        <img src="../../assets/images/userinfo/jifen.png" alt="">
                        <p>积分：{{ userStore.userInfo.integral }}</p>
                    </li>
                    <li>
                        <img src="../../assets/images/userinfo/vip.png" alt="">
                    <p>VIP服务</p>
                </li>
                    <li>
                        <img src="../../assets/images/userinfo/chongzhi.png" alt="">
                        <p>充值</p>
                    </li>
                </ul>
            </div>
        <div class="xinxi">
    <ul>
        <li>
            <div class="cell-content">
                <img src="../../assets/images/yemian/跑车.png" alt="车牌验证" class="icon" />
                <van-cell title="车牌验证" is-link url="" />
            </div>
        </li>
        <li>
            <div class="cell-content">
                <img src="../../assets/images/yemian/chongzhi.png" alt="修改个人信息" class="icon" />
                <van-cell title="修改个人信息" is-link to="editinfo" />
            </div>
        </li>
        <li>
            <div class="cell-content">
                <img src="../../assets/images/yemian/用户中心-帮助中心.png" alt="疑问解答" class="icon" />
                <van-cell title="疑问解答" is-link to="help" />
            </div>
        </li>
    </ul>
</div>

</div>

        <van-tabbar v-model="active" >
            <van-tabbar-item icon="wap-home" replace to="/home/home">主页</van-tabbar-item>
            <van-tabbar-item icon="comment" replace to="/message/contactrelist" dot>消息</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart" replace to="/shop/shop">商店</van-tabbar-item>
            <van-tabbar-item icon="friends" replace to="/user/userinfo">我的</van-tabbar-item>
        </van-tabbar>

    </div>
</template>

<script setup>
// 导入依赖
import { POST, GET } from "../../tools/fetch";
import { userApi, baseURL } from '../../tools/api.js';
// 路由相关的，允许你用js控制路由，跳转组件一点就的走，但是此时控制了，不是直接点了就跳转，需要js控制允许控制转向其他路由
//  控制路由（走的时候）访问路由（来的时候）
// import {useRouter,useRoute} from 'vue-router';
import { useRouter } from 'vue-router';
const router = useRouter();
// token
import { useUserStore } from '../../tools/storage.js';
// 初始化
const userStore = useUserStore();
const URL = baseURL;

const dataSource = ref({
    list: []
})

// 页面加载时调用
const onLoad = async () => {
    const resResult = await GET({
        api: userApi.player
    })
    dataSource.value.list = resResult.data
}
onLoad()

</script>

<style lang="less" scoped>

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

}

.card{
    display: flex;
    align-items: center;
   justify-content:center;
   margin-top: 10vh;
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
}

.main h1{
    font-size: 4.5vw;
    margin-left: 6vw;
}
.list{
    display: flex;
    justify-content: space-between;
    margin-top: 4vh;
    border: 2px solid #ccc;
    border-radius: 8px;
    width: 90%;
    padding: 5px;
    
}
.list ul{
    display: flex;
    flex-direction: row;
    width: 90%;
    
}
.list li{
    display: flex;
    flex-direction: column;
    align-items: center;  
    min-width: 80px;
    text-align: center;
    margin: 0 17px;
    flex: 1;
}
.list img{
    width: 60px;
    height: 60px;
}
.xinxi{
    display: flex;
    flex-direction: column;
    align-items: flex-start;   
    width: 90%;
    
    
//    background-color: #eee;
}
.xinxi ul{
    width: 100%;
    padding: 0;
    margin-top: 1vh;
    margin-bottom: 4vh;
    border: 2px solid #ccc;
    border-radius: 8px;
}
.xinxi ul li{
    list-style-type: none;
    border-bottom: 1px solid #ccc; 
    margin-top: 8vh;
    width: 100%;
}
.xinxi p{
    font-size: 5vw;
}
.xinxi .van-cell{
    background-color: transparent;
}

.cell-content {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.icon {
    width: 20px; /* 设置图标的宽度 */
    height: 20px; /* 设置图标的高度 */
    margin-right: 10px; /* 图标与文本之间的间距 */
    padding: 10px;
}



</style>